<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态组件与v-once指令</title>
    <script src="./vue.js"></script>
</head>
<body>
<div id="app">
    <!--使用v-if实现的话，每次点击button都会销毁一个组件再创建一个组件，这种操作会耗费一定的性能
        可以使用v-once来解决，当child-one第一次被渲染时，由于组件上有v-once指令，因此会被放置于内存中，
        当我们点击button进行切换时，child-two也会被放置于内存中，当我们再次点击button时，并不会重新创建一个child-one，
        而是从内存中取出以前的child-one组件，从而提升性能-->
    <child-one v-if="type==='child-one'"></child-one>
    <child-two v-if="type==='child-two'"></child-two>
    <button @click="handleBtnClick">change</button>
</div>
<script>
    Vue.component('child-one', {
        template: '<div v-once>child-one</div>'
    });
    Vue.component('child-two', {
        template: '<div v-once>child-two</div>'
    });
    var app = new Vue({
        el: '#app',
        data: {
            type: 'child-one'
        },
        methods: {
            handleBtnClick: function () {
                this.type = this.type === 'child-one' ? 'child-two' : 'child-one';
            }
        }
    });
</script>
</body>
</html>